<template>
    <div 
        class="tree-select-node" 
        :class="{
            'is-disabled-toggle': disableToggle,
            'is-expanded': expanded,
            'is-collapse': collapse,
            'is-selected': selected
        }" 
        :style="style"
        @click="handleClick"
    >
        <div class="tree-select-node__indent">
            <span 
                class="tree-select-node__indent-item"
                v-for="index in indentNum"
                :key="index"
            ></span>
        </div>
        <div 
            class="tree-select-node__toggle" 
            @click.stop="handleToggleClick"
        ></div>
        <slot :node="node">
            <div class="tree-select-node__label">{{node.data[labelKey]}}</div>
        </slot>
        <div class="tree-select-node__addon" v-if="$scopedSlots.addon">
            <slot name="addon" :node="node"></slot>
        </div>
    </div>
</template>
<script>
export default {
    name: 'TreeSelectNode',
    props: {
        node: {
            type: Object,
            required: true
        },
        itemHeight: {
            type: Number,
            default: 24
        },
        labelKey: {
            type: String,
            default: 'label'
        },
        selected: {
            type: Boolean,
            default: false
        }
    },
    computed: {
        style () {
            const sy = {}
            if (this.itemHeight) {
                sy.height = this.itemHeight + 'px'
            }
            return sy
        },
        indentNum () {
            return this.node.level - 1
        },
        expanded () {
           return this.node.expanded 
        },
        collapse () {
           return !this.node.expanded 
        },
        disableToggle () {
            return !this.node.children || !this.node.children.filter(v => !v.removed).length
        }
    },
    methods: {
        handleToggleClick () {
            if (this.expanded) {
                this.$emit('collapse', {
                    node: this.node
                })
            } else {
                this.$emit('expand', {
                    node: this.node
                })
            }
        },
        handleClick () {
            this.$emit('click', {
                node: this.node
            })
        }
    }
}
</script>
<style>
.tree-select-node{
    display: flex;
    flex-direction: row;
    transition: all .25s;
    cursor: pointer;
    padding: 0 6px;
    align-items: center;
}
.tree-select-node:hover {
    background-color: #f3f3f3;
}
.tree-select-node.is-selected {
    background-color: #cfdef9;
}
.tree-select-node.is-disabled-toggle .tree-select-node__toggle{
    opacity: 0;
    cursor: initial;
}
.tree-select-node.is-expanded .tree-select-node__toggle:after {
    transform: rotate(90deg);
}
.tree-select-node.is-collapse .tree-select-node__toggle:after {
    transform: rotate(0deg);
}
.tree-select-node__indent{
    display: inline-block;
}
.tree-select-node__indent-item{
    display: inline-block;
    width: 1em;
    height: 1em;
}
.tree-select-node__toggle{
    display: inline-block;
    height: 20px;
    width: 20px;
    text-align: center;
    border-radius: 3px;
    cursor: pointer;
    margin-right: 3px;
}
.tree-select-node__toggle:after {
    content: '';
    display: inline-block;
    border: 5px solid #999;
    border-top-color: transparent;
    border-bottom-color: transparent;
    border-right: 0;
    vertical-align: top;
    margin-top: 5px;
}
.tree-select-node__toggle:hover {
    background-color: rgba(0,0,0,.1);
}
.tree-select-node__label{
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
</style>